﻿@charset "utf-8";
@import "common/global";
@import "header";
@import "footer";

.mydata{
    .item-wrap{
        background: #fff;
        .item-li{
            padding-top: .3rem;
            padding-bottom: .3rem;
            .item-icon{
                background-size:.8rem .8rem;
                background-repeat:no-repeat;
                width: .8rem;
                height:.8rem;
            }
            .item-text{
                width: 60%
            }

            .item-icon-credit{
                background-image:url(../../public/assets/images/myicon/credit.png);
            }
            .item-icon-bracelet{
                background-image:url(../../public/assets/images/myicon/bracelet.png);
            }
            .item-icon-glass{
                background-image:url(../../public/assets/images/myicon/glass.png);
            }
            .item-icon-said{
                background-image:url(../../public/assets/images/myicon/said.png);
            }
            .item-icon-shoes{
                background-image:url(../../public/assets/images/myicon/shoes.png);
            }
            .item-icon-watch{
                background-image:url(../../public/assets/images/myicon/watch.png);
            }
        }
    }
}


.switch-icon-off{
    background-size:auto;
    background-repeat:no-repeat;
    width: .3rem;
    height:.6rem;
    margin-right: rem(30px);
    margin-top:.2rem;
    background-image:url(../../public/assets/images/right-icon.png);
}

.switch-icon-on{
    text-align: center;
    margin-right: rem(30px);
    margin-top: rem(10px);
    padding-top: rem(4px);
    width: rem(150px);
    height: rem(50px);
    border-radius: rem(50px);
    background: #fff;
    border: 1px solid $diyColor;
    color: $diyColor;

    .switch-text{
        display: inline;
    }
}

.switch-text{
    display: none;
}

.mypolicy{
    background: #efeff4;
    .tab-title-wrap{
        width: 100%;
        font-size: rem(30px);
        display: flex;
        align-items: center;
        position: fixed;
        z-index: 9999;
        background: #fff;
        left: 0;
        top: 0;
    }
    .tab-title{
        text-align: center;
        color: #000;
        padding: .3rem 0;
        flex: 1 1 auto;

        .tab-title-text{
            width: 100%;
            display: inline-block;
            border-right: 1px solid #ddd;
        }
    }

    .tab-title:nth-last-child(1) .tab-title-text{
        border-right: none;
    }

    .tab-item-wrap {
        background-color: #efeff4;
    }


    .active {
        color: $diyColor;
        border-bottom: 1px solid $diyColor;
    }

    .tab-item{
        width: 100%;
        display: none;
    }
    
    .show{
        display: block;
    }

    .list-ul{
        padding:rem(30px);
        .list-li{
             position: relative;
             background: #fff;
             margin-bottom: rem(30px);
            
             padding:rem(20px) rem(15px);
             border-radius: rem(10px);
        }
    }

    [class ^='icon-state']{
        position: absolute;
        right: .6rem;
        top:.3rem;
        background-size: cover;
        background-repeat:no-repeat;
        width: 1.2rem;
        height:1.2rem;

    }

    .icon-state-1{
        background-image: url("../../public/assets/images/myicon/icon-state-1.png")
    }
    .icon-state-2{
        background-image: url("../../public/assets/images/myicon/icon-state-2.png")
    }
    .icon-state-3{
        background-image: url("../../public/assets/images/myicon/icon-state-3.png")
    }
    
     [class ^='icon-half']{
        position: absolute;
        background-size: cover;
        background-repeat:no-repeat;
        width: .15rem;
        height:.3rem;
        top:.7rem;
    }
    .icon-half-right{
        left: 0;
        background-image: url("../../public/assets/images/myicon/half-right.png")
    }
     .icon-half-left{
        right: 0;
        background-image: url("../../public/assets/images/myicon/half-left.png")
    }
}

.success-page{
    .success-wrap{
        margin:rem(80px) 0 rem(40px) 0;
        img{
            width:rem(300px);
            height:rem(300px)
        }
    }

    .btn-div{
        margin-top:rem(100px);
    }
}
